<template>
	<view class="index-page mh-100 pb--window-bottom">
    <view class="h--status-bar-height"></view>
    <view class="tabs">
      <scroll-view class="tab-list" scroll-x :scroll-into-view="scrollInto" scroll-with-animation>
        <block v-for="(item, index) in 10" :key="index">
          <view :id="'tab' + index" class="tab-list-item" :class="tabIndex === index ? 'active' : ''" @tap="handleTabSelect(index)">
            <text class="title">列表{{item}}</text>
          </view>
        </block>
      </scroll-view>
    </view>

    <swiper class="content" :current="tabIndex" skip-hidden-item-layout :style="{'height': contentH + 'px'}"
    @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in 10" :key="index">
        <scroll-view class="list" scroll-y :style="{'height': contentH + 'px'}">
          <view v-for="(subItem,subIndex) in 100" :key="subIndex" >
            <text>{{subIndex}}</text>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue"

  /* 处理tabs区域 */
  const tabIndex = ref(0)
  const scrollInto = ref('')
  const handleTabSelect = (index) => {
    tabIndex.value = index
    scrollInto.value = 'tab' + index
  }

  /* 处理轮播区域 */
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 获取屏幕剩余高度
  const contentH = systemInfo.windowHeight - uni.upx2px(100) - 50
  // 滑动轮播联动tab
  const handleSwiperChange = (e) => {
    handleTabSelect(e.detail.current)
  }
</script>

<style lang="scss" scoped>
	.index-page {
    .tabs{
      height: 100rpx;
      @include flexRow;
      .tab-list{
        white-space: nowrap;
        .tab-list-item{
          display: inline-block;
          width: 120rpx;
          line-height: 50rpx;
          border: 1px solid #ccc;
          text-align: center;
          margin-left: 10rpx;
          &.active{
            border-bottom: 5rpx solid aqua;
            .title{
              color: aqua;
            }
          }
          .title{
            color: #666;
          }
        }
      }
    }
		.content{
      .list{}
    }
	}
</style>
